<template>
    <el-card class="!border-none" shadow="never">
        <el-page-header
            :content="route.query.id ? '编辑打印机' : '新增打印机'"
            @back="$router.back()"
        />
        <el-form
            :model="formData"
            label-width="120px"
            class="w-[540px] mt-4"
            :rules="formRules"
            ref="formRef"
        >
            <el-form-item label="打印机名称" prop="name">
                <el-input placeholder="请输入打印机名称" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="打印机类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择">
                    <el-option label="易联云K4" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="终端号" prop="machine_code">
                <el-input placeholder="请输入设备终端号" v-model="formData.machine_code"></el-input>
            </el-form-item>
            <el-form-item label="打印机密钥" prop="private_key">
                <el-input placeholder="请输入打印机密钥" v-model="formData.private_key"></el-input>
            </el-form-item>

            <el-form-item label="应用ID" prop="client_id">
                <div>
                    <el-input placeholder="请输入应用ID" v-model="formData.client_id"></el-input>
                    <div class="form-tips">应用id在易联云-开发者中心-应用中心获取</div>
                </div>
            </el-form-item>

            <el-form-item label="应用密钥" prop="client_secret">
                <div>
                    <el-input
                        placeholder="请输入应用密钥"
                        v-model="formData.client_secret"
                    ></el-input>
                    <div class="form-tips">apiKey在易联云-开发者中心-应用中心获取</div>
                </div>
            </el-form-item>
            <el-form-item label="小票模板" prop="template_id">
                <el-select v-model="formData.template_id" placeholder="请选择">
                    <el-option
                        v-for="item in optionsData.templatelists.lists"
                        :key="item.id"
                        :value="item.id"
                        :label="item.template_name"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="打印机联数" prop="print_number">
                <el-radio-group v-model="formData.print_number">
                    <el-radio :label="1">1联</el-radio>
                    <el-radio :label="2">2联</el-radio>
                    <el-radio :label="3">3联</el-radio>
                    <el-radio :label="4">4联</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="自动打印" prop="auto_print">
                <el-switch v-model="formData.auto_print" :active-value="1" :inactive-value="0" />
                <span class="form-tips ml-4">订单付款后自动打印小票</span>
            </el-form-item>

            <el-form-item label="打印机状态" prop="status">
                <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
                <span class="form-tips ml-4">关闭和开启打印机的使用</span>
            </el-form-item>
        </el-form>
        <footer-btns>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </footer-btns>
    </el-card>
</template>
<script lang="ts" setup>
import { addprinter, editprinter, detailprinter, gettemplatelists } from '@/api/application'
import { useDictOptions } from '@/hooks/useDictOptions'
const router = useRouter()

const route = useRoute()
const formData = reactive({
    id: route.query.id,
    name: '',
    type: '',
    machine_code: '',
    private_key: '',
    client_id: '',
    client_secret: '',
    template_id: '',
    print_number: 1,
    status: 1,
    auto_print: 1
})
const formRules = {
    name: [
        {
            required: true,
            message: '请输入打印机名称',
            trigger: ['blur', 'change']
        }
    ],
    type: [
        {
            required: true,
            message: '请选择打印机类型',
            trigger: ['blur', 'change']
        }
    ],
    machine_code: [
        {
            required: true,
            message: '请输入终端号',
            trigger: ['blur', 'change']
        }
    ],
    private_key: [
        {
            required: true,
            message: '请输入打印机密钥',
            trigger: ['blur', 'change']
        }
    ],
    client_id: [
        {
            required: true,
            message: '请输入应用ID',
            trigger: ['blur', 'change']
        }
    ],
    client_secret: [
        {
            required: true,
            message: '请输入应用密钥',
            trigger: ['blur', 'change']
        }
    ],
    template_id: [
        {
            required: true,
            message: '请选择小票模板',
            trigger: ['blur', 'change']
        }
    ],
    print_number: [
        {
            required: true,
            message: '请选择打印机联数',
            trigger: ['blur', 'change']
        }
    ],
    auto_print: [
        {
            required: true,
            message: '请选择是否自动打印',
            trigger: ['blur', 'change']
        }
    ],
    status: [
        {
            required: true,
            message: '请选择是否自动打印',
            trigger: ['blur', 'change']
        }
    ]
}
const handleSubmit = async () => {
    if (!route.query.id) await addprinter({ ...formData })
    else await editprinter({ ...formData })
    router.back()
}
const { optionsData } = useDictOptions<{
    templatelists: any
}>({
    templatelists: {
        api: gettemplatelists
    }
})

const getData = async () => {
    if (!route.query.id) return
    const data = await detailprinter({ id: route.query.id })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}
getData()
</script>
